﻿import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Layouts 1.2
import QtQuick.Controls.Styles 1.2
import QtQuick.Controls 2.12
import QtMultimedia 5.14

Item {
    id: root
    readonly property real dp: config.dp
    property string title: ""
    property string name1: ""
    property string name2: ""
    property int inputflag: 0
    property int bttype: 1
    property int onbt: 0
    property string inputt: ""
    property bool bt1enable: true
    property bool bt2enable: true
    width: 140*dp
    height: 80*dp

    onOnbtChanged: {
        if(bttype===1){
            if(onbt===1){
                btl.colorGradient = false
                btl.button_color = "#1B6BDA"
                btr.gradientDirect = 0
                btr.colorGradient = true
                btr.button_color_2 = "#F2F8FF"
                btr.button_color = "#FFFFFF"
            }else{
                btr.colorGradient = false
                btr.button_color = "#1B6BDA"
                btl.gradientDirect = 0
                btl.colorGradient = true
                btl.button_color_2 = "#F2F8FF"
                btl.button_color = "#FFFFFF"
            }
        }else if(bttype===2){
            if(onbt===1){
                btl.button_color = "#1B6BDA"
                btr.button_color = "#F2F8FF"
            }else{
                btr.button_color = "#1B6BDA"
                btl.button_color = "#F2F8FF"
            }
        }else if(bttype===3){
            if(onbt===1){
                btl.button_color = "#1B6BDA"
                btr.button_color = "#FFFFFF"
            }else{
                btr.button_color = "#1B6BDA"
                btl.button_color = "#FFFFFF"
            }
        }
    }

    Component.onCompleted: {
        if(bttype===1){
            btl.gradientDirect = 0
            btl.colorGradient = true
            btl.button_color_2 = "#F2F8FF"
            btl.button_color = "#FFFFFF"
            btr.gradientDirect = 0
            btr.colorGradient = true
            btr.button_color_2 = "#F2F8FF"
            btr.button_color = "#FFFFFF"
        }else if(bttype===2){
            btl.button_color = "#F2F8FF"
            btr.button_color = "#F2F8FF"
        }else if(bttype===3){
            btl.button_color = "#FFFFFF"
            btr.button_color = "#FFFFFF"
        }
        if(inputflag===1){
            titleid.verticalAlignment= Text.AlignVCenter  // 垂直居中
            titleid.horizontalAlignment= Text.AlignLeft  // 左对齐
        }else{
            titleid.anchors.centerIn= titlee
            titleid.verticalAlignment= Text.AlignVCenter  // 垂直居中
        }
    }

    // 边框
    Rectangle {
        anchors.fill: parent
        radius: 1
        border.color: "#1677FF"
        border.width: 1
        color: "transparent"
        z: 10
    }

    // 内容区域
    Item {
        id: contentArea
        anchors {
            left: parent.left
            right: parent.right
            top: parent.top
            bottom: parent.bottom
        }

        // 顶部标题区域
        Rectangle{
            id:titlee
            x:0*dp
            y:0*dp
            width: contentArea.width
            height: contentArea.height*3/8
            color: "#E1E1E1"

            Text {
                id:titleid
                text: title
                font.pixelSize: 15
                x:0
                height: contentArea.height*3/8
//                anchors.centerIn: parent
//                horizontalAlignment: Text.AlignLeft
                color: "#222222"
            }
            CustomInputText{
                visible: inputflag===1
                id:inputtext
                intflag: true
                editWidth: parent.width*0.31
                x:parent.width-parent.width*0.31
                y:2*dp
                editHeight: contentArea.height*3/8-4*dp
                onTextChanged: {
                    inputt=inputtext.getText()
                }
            }
        }

        // 水平分隔线
        Rectangle{
            x:0*dp
            y:contentArea.height*3/8
            width: contentArea.width
            height: 1*dp
            color: "#1677FF"
            z:10
        }

        // 垂直分隔线
        Rectangle{
            x:contentArea.width/2-0.5*dp
            y:contentArea.height*3/8
            width: 1*dp
            height: contentArea.height*5/8
            color: "#1677FF"
            z:10
        }

        // 左侧按钮
        CustomButton{
            id:btl
            title: name1
            x:0*dp
            y:contentArea.height*3/8
            width: contentArea.width/2
            height: contentArea.height*5/8
            radius: 0
            enabled: bt1enable
            onReleased: {
                bt1()
                onbt=1
            }
        }

        // 右侧按钮
        CustomButton{
            id:btr
            title: name2
            x:contentArea.width/2
            y:contentArea.height*3/8
            width: contentArea.width/2
            height: contentArea.height*5/8
            radius: 0
            enabled: bt2enable
            onReleased: {
                bt2()
                onbt=2
            }
        }
    }

    signal bt1()
    signal bt2()
}
